<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-23 10:15:33
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-02 15:19:59
 * @FilePath: \cxl-h5\src\components\loading\Index.vue
-->
<template>
    <Transition name="fade" mode="out-in" appear>
        <section class="loading-container" v-if="modelValue">
            <section class="loading-box">
                <section
                    class="loading-item"
                    v-for="item in 12"
                    :key="item"
                    :style="{ transform: 'translate(-50%, -50%) rotate(' + item * 30 + 'deg)' }"
                >
                    <i :style="{ animation: 'loading 1.5s ' + item * 0.1 + 's linear infinite' }"></i>
                </section>
            </section>
        </section>
    </Transition>
</template>

<script setup lang="ts">
defineProps(['modelValue', 'title', 'type'])
defineEmits(['update:modelValue', 'close'])
</script>

<style scoped lang="scss">
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-box {
    width: 6rem;
    height: 6rem;
    position: relative;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: var(--cxl-size-6);
    .loading-item {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        i {
            display: block;
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 50%;
            background-color: var(--cxl-color-white);
            margin-left: 1.75rem;
            transform: scale(0);
        }
    }
}
</style>
